import React from 'react';
import {createUseStyles} from "react-jss";
const useStyles = createUseStyles({
    title:{
        background: 'lightblue',
        '&:hover': {
            color: props=>{
                return props.hoverColor
            },
        }
    },
    list:props=>{
        return props.title;
    },
    content:{
        background: 'lightblue',
    }
})
export const LinkReactJss = ()=>{
    const {title,list,content} = useStyles({
        color:'lightblue',
        hoverColor:'red',
        title:{
            background: 'lavender',
            '& a':{ //针对a标签设置样式
                color: 'red',
                '&:hover': { //针对a标签的鼠标悬浮设置样式
                    color: 'blue',
                }
            }
        }
    });
    return (
        <>
            <div className={title}>
                链接标题
            </div>
            <div className={list}>
                <a href={'http://localhost:8080/'}>
                    hello world
                </a>
            </div>
            <div className={content}>
                content
            </div>
        </>
    )
}